<template>
    <div class="app-top-header">
        <div class="app-top-left">
            <h1 class="left-title">{{ $t('common.microapp') }}</h1>
        </div>
        <!-- 结构先保留 -->
        <div class="app-top-center"></div>
        <div class="app-top-right">
            <app-lang/>
            <div class="app-header-user">
                <app-user/>
            </div>
        </div>
    </div> 
</template>
<script lang="ts">
import { Component,Vue } from "vue-property-decorator";
import appUser from "@/components/app-user/app-user.vue";
import appLang from "@/components/app-lang/app-lang.vue";

@Component({
    components:{
        appUser,
        appLang
    }
})
export default class UserInfo extends Vue{
    
}
</script>
<style lang="less" scoped>
.app-top-header{
    width: 100%;
    height: 48px;
    background-color: #1890ff;
    display: flex;
    color: white;
    >div{
        flex: 1;
    }
    .app-top-right{
        align-items: center;
        justify-content: flex-end; 
        flex-grow: 1; 
        width: 25%; 
        height: auto;
        display: flex;
        >.app-header-user{
            display: flex; 
            flex-wrap: wrap; 
            flex-shrink: 0;
            z-index: inherit;
        }
    }
    .app-top-left>.left-title{
        color: white;
        margin:0 8px;
        line-height: 48px;
        font-weight: 600;
        font-size: 28px;
        vertical-align: middle;
        font-family: "黑体";
    }

}

</style>